The latest updates on your projects. Learn more about Vercel for Git ↗︎

Risk Level 2 - /home/runner/work/graphic-walker/graphic-walker/packages/graphic-walker/src/components/codeExport/index.tsx

1. The syntaxHighlight function is doing a lot of string replacements which could be inefficient for large strings. Consider using a library for syntax highlighting if possible, as it would be more efficient and safer.

2. The useEffect hook is doing a lot of conditional checks for tabKey. Consider using a switch statement instead of multiple if-else statements for better readability.

3. The console.error('unknown tabKey') statement could be improved by including the value of the tabKey in the error message for better debugging.

Example:

useEffect(() => {
  if (showCodeExportPanel) {
    switch(tabKey) {
      case 'graphic-walker':
        setCode(vizStore.exportCode());
        break;
      case 'vega-lite':
        setCode(vizStore.lastSpec);
        break;
      case 'workflow':
        setCode(vizStore.workflow);
        break;
      default:
        console.error(`unknown tabKey: ${tabKey}`);
    }
  }
}, [tabKey, showCodeExportPanel, vizStore]);

4. The dangerouslySetInnerHTML prop is used which can open up the possibility for Cross-Site Scripting (XSS) attacks. Make sure the content being set is properly sanitized.

📚🔄🔒

Powered by Code Review GPT